<template>
  <div class="bg" ref="appRef">
    <div class="sbzt"><span>设备状态</span></div>
    <img src="../../../assets/dashboard/车间.png" class="yd">
    <div class="title">
      <span class="main-text" style="margin-left: 280px">设备运营中心</span>
      <div class="time-container">
        <div class="title-time1">
          <span>{{ dayjs(new Date()).format('YYYY-MM-DD') }}</span>
        </div>
        <div class="title-time2">
          <span style="margin-right: 120px">{{ currentTime }}</span>
        </div>
      </div>
    </div>
    <div class="body">
      <div class="body-left">
        <div class="body-left-top left-box">
          <div class="biaoti"><span>维修能力分析</span></div>
          <div id="echart-weixiu" class="chart-view-left"></div>
        </div>
        <div class="body-left-mid left-box">
          <div class="biaoti"><span>故障类型统计</span></div>
          <div id="echart-failuretype" class="chart-view-left"></div>
        </div>
        <div class="body-left-bot left-box">
          <div class="biaoti"><span>故障统计分析</span></div>
          <div id="echart-faultstatistics" class="chart-view-left"></div>
        </div>
        <div class="body-left-fourth left-box-bot">
          <div class="biaoti-bot"><span>异常看板</span></div>
          <div style="padding: 7px 1px;">
            <table class="thead" style="width: 100%;text-align: center">
              <tr>
                <th>序号</th>
                <th>设备编号</th>
                <th>故障描述</th>
                <th>负责人</th>
                <th>状态持续时间</th>
              </tr>
            </table>
            <div class="tbody-box" style="overflow-y: auto;height:144px">
              <table class="tbody" style="width: 100%;text-align: center">

                <tr v-for="(item,index) in abnormalList" :key="index">
                  <td style="width: 10%;">
                    <div style="width: 100%;">{{ item.xh }}</div>
                  </td>
                  <td style="width: 22%;">
                    <div style="width: 100%;">{{ item.faultRepairDeviceId }}</div>
                  </td>
                  <td style="width: 20%;">
                    <div style="width: 100%;">{{ item.faultRepairRemarks }}</div>
                  </td>
                  <td>
                    <div style="width: 100%;">{{ item.createBy_dictText }}</div>
                  </td>
                  <td>
                    <div style="width: 100%;">{{
                        calculateTimeDifference(item.faultRepairTime , item.completeTime)
                      }}
                    </div>
                  </td>
                </tr>
              </table>
              <a-pagination
                :current="currentPage1"
                :pageSize="pageSize1"
                :total="total1"
                @change="handlePageChange1"
                style="margin-top: 1px; margin-bottom: 5px; text-align: center;"
              />
            </div>
          </div>
        </div>
      </div>
      <div class="body-middle">
        <div style="position:absolute;top:150px;left:600px;">
          <div style="display: flex;justify-content: space-between;width: 660px;text-align: center;font-size:12px">
            <div>
              <div id="echart-shebei1" style="height: 150px; width: 150px"></div>
              <div>{{"设备总数"}}</div>
            </div>
            <div>
              <div id="echart-shebei2" style="height: 150px; width: 150px"></div>
              <div>{{"运行数量"}}</div>
            </div>
            <div>
              <div id="echart-shebei3" style="height: 150px; width: 150px"></div>
              <div>{{"月别保养数量"}}</div>
            </div>
            <div>
              <div id="echart-shebei4" style="height: 150px; width: 150px"></div>
              <div>{{"月别校准数量"}}</div>
            </div>
          </div>
        </div>
        <div class="body-middle-mid middle-box">
          <div class="biaoti"><span>备品管理</span></div>
          <div id="echart-beipin" class="chart-view-left"></div>
        </div>
      </div>
      <div class="body-right">
        <div class="body-right-top box">
          <div class="biaoti"><span>保养统计分析</span></div>
          <div id="echart-baoyangstatic" class="chart-view"></div>
        </div>
        <div class="body-right-mid box">
          <div class="biaoti"><span>校准统计分析</span></div>
          <div id="echart-jiaozhun" class="chart-view"></div>
        </div>
        <div class="body-right-bot box-bot">
          <div class="biaoti-bot"><span>保养看板</span></div>
          <div style="padding: 5px 1px;">
            <table class="thead" style="width: 100%;text-align: center">
              <tr>
                <th>序号</th>
                <th>设备编号</th>
                <th>保养项目</th>
                <th>责任人</th>
                <th>当前状态</th>
              </tr>
            </table>
            <div class="tbody-box" style="overflow-y: auto;height:144px">
              <table class="tbody" style="width: 100%;text-align: center">

                <tr v-for="(item,index) in maintainList" :key="index">
                  <td style="width: 10%;">
                    <div style="width: 100%;">{{ item.xh }}</div>
                  </td>
                  <td style="width: 20%;">
                    <div style="width: 100%;">{{ item.shebeibianhao }}</div>
                  </td>
                  <td style="width: 15%;">
                    <div style="width: 100%;">{{ item.cengji_dictText }}</div>
                  </td>
                  <td style="width: 20%;">
                    <div style="width: 100%;">{{ item.fuzeren_dictText }}</div>
                  </td>
                  <td style="width: 15%;">
                    <a-button type="primary">
                      {{ item.zhuangtai_dictText }}
                    </a-button>
                  </td>
                </tr>
              </table>
              <a-pagination
                :current="currentPage"
                :pageSize="pageSize"
                :total="total"
                @change="handlePageChange"
                style="margin-top: 1px; margin-bottom: 5px; text-align: center;"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <img src="../../../assets/logo.png"
         style="position: absolute;left:20px;top:12px;filter: grayscale(100%);-webkit-filter: grayscale(100%);filter: brightness(0%) invert(100%);-webkit-filter: brightness(0%) invert(100%);mix-blend-mode: lighten;height:40px"/>
  </div>

</template>

<script>
import dayjs from 'dayjs'
import {httpAction, getAction} from '@api/manage'
import * as echarts from 'echarts'
import moment from "moment";

export default {
  name: "daping",
  components: {

  },
  data() {
    return {
      queryParam: {},
      abnormalList: [],
      maintainList: [],
      currentTime: new Date().toLocaleTimeString(),
      currentPage: 1, // 当前页码
      pageSize: 10,
      total: 10,
      currentPage1: 1, // 当前页码
      pageSize1: 10,
      total1: 10,
    }
  },
  mounted() {
    this.initData()
    // 设置一个每秒更新一次的定时器
    this.timer = setInterval(() => {
      this.updateCurrentTime();
    }, 1000);
  },
  methods: {
    handlePageChange1(page){
      this.currentPage1 = page;
      this.queryGuzhang();
    },
    handlePageChange(page) {
      this.currentPage = page;
      this.queryBaoyang();
    },
    updateCurrentTime() {
      let currentDate = new Date(); // 假设这是你的当前时间
      let nextDate = new Date(currentDate.getTime() + 200); // 与本地差大概200ms
      let formattedTime = nextDate.toLocaleTimeString();
      this.currentTime = formattedTime; // 更新时间
    },
    dayjs,
    initData() {
      this.queryWeixiu()
      this.queryBeipin()
      this.queryGuzhang()
      this.queryBaoyang()
      this.queryGzType()
      this.queryGzStatic()
      this.queryShebei()
      this.queryJiaozhun()
      this.baoyangStatic()
    },
    queryShebei(){
      getAction('/view/screen/index/deviceStatic').then(res => {
        if (res.success) {
          ;(() => {
            var chartDom = document.getElementById('echart-shebei1')
            var myChart = echarts.init(chartDom)
            var option = {
              color:['#5aefee'],
              title: {
                text: res.result.deviceCount,
                textStyle:{
                  color:'#fff',
                  fontSize: 20,
                },
                left: 'center',
                top: 'center'
              },
              series: [
                {
                  type: 'pie',
                  data: [
                    {
                      value: res.result.deviceCount
                    },
                  ],
                  radius: ['55%', '45%'],
                  label:{
                    show:false
                  }
                }
              ]
            }
            option && myChart.setOption(option)
          })()
          ;(() => {
            var chartDom = document.getElementById('echart-shebei2')
            var myChart = echarts.init(chartDom)
            var option = {
              color:['#0FB0FF','#CBEFFF'],
              title: {
                text: res.result.onlineCount,
                textStyle:{
                  color:'#fff',
                  fontSize: 20,
                },
                left: 'center',
                top: 'center'
              },
              series: [
                {
                  type: 'pie',
                  data: [
                    {
                      value: res.result.onlineCount
                    },
                    {
                      value: res.result.deviceCount - res.result.onlineCount
                    },
                  ],
                  radius: ['55%', '45%'],
                  label:{
                    show:false
                  }
                }
              ]
            }
            option && myChart.setOption(option)
          })()
          ;(() => {
            var chartDom = document.getElementById('echart-shebei3')
            var myChart = echarts.init(chartDom)
            var option = {
              color:['#F7CC62','#FEF8EA'],
              title: {
                text: res.result.baoyangCount,
                textStyle:{
                  color:'#fff',
                  fontSize: 20,
                },
                left: 'center',
                top: 'center'
              },
              series: [
                {
                  type: 'pie',
                  data: [
                    {
                      value: res.result.baoyangCount
                    },
                    {
                      value: res.result.allBaoyangCount - res.result.baoyangCount
                    },
                  ],
                  radius: ['55%', '45%'],
                  label:{
                    show:false
                  }
                }
              ]
            }
            option && myChart.setOption(option)
          })()
          ;(() => {
            var chartDom = document.getElementById('echart-shebei4')
            var myChart = echarts.init(chartDom)
            var option = {
              color:['#26DD67','#E4FBEC'],
              title: {
                text: res.result.jiaozhunCount,
                textStyle:{
                  color:'#fff',
                  fontSize: 20,
                },
                left: 'center',
                top: 'center'
              },
              series: [
                {
                  type: 'pie',
                  data: [
                    {
                      value: res.result.jiaozhunCount
                    },
                    {
                      value: res.result.allJiaozhunCount - res.result.jiaozhunCount
                    },
                  ],
                  radius: ['55%', '45%'],
                  label:{
                    show:false
                  }
                }
              ]
            }
            option && myChart.setOption(option)
          })()
        }
      })
    },

    queryWeixiu(){
      getAction('/view/screen/index/repair').then(res => {
        if(res.success){
          var chartDom = document.getElementById('echart-weixiu')
          var myChart = echarts.init(chartDom)
          var option = {
            color: ['#C9B9F3FF','#379e9d','#ECCB77FF','#5aefee'],
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              },
              textStyle:{
                color:'#ffffff'
              },
              formatter: function (params) {
                var html = params[0].name + '<br>';
                html+=`${params[1].marker}需维修：${params[1].value?.toFixed(2)??'-'}<br>`+
                  `${params[2].marker}已维修：${params[2].value?.toFixed(2)??'-'}<br>`+
                  `${params[0].marker}维修率：${(params[0].value?.toFixed(2)??'-')}%`
                return html;
              }
            },
            title: {
              textStyle: {
                fontWeight: 'normal'
              }
            },
            legend: {
              show:true,
              icon: 'rect',
              itemWidth: 10,
              itemHeight: 10,
              right:150,
              top:12,
              textStyle: {
                color: '#ffffff',
              },

            },
            grid: {
              top: 40,
              left: 12,
              right: 12,
              bottom: 12,
              containLabel: true
            },
            xAxis:
              {
                type: 'category',
                data: res.result.map(e => e.repairDate),
                axisLabel:{
                  color:'#ffffff'
                },
              },
            yAxis:[
              {
                name:'数量',
                type: 'value',
                splitLine:{
                  show: false
                },
                axisLabel:{
                  color:'#ffffff'
                },
                nameTextStyle: {
                  color: '#ffffff'
                }
              },
              {
                name:'维修率',
                type: 'value',
                axisLabel:{
                  color:'#ffffff',
                  formatter: '{value}%',
                },
                nameTextStyle: {
                  color: '#ffffff'
                },
                max:100,
                min:0,
                splitLine:{
                  show:false,
                },
              },
            ],
            series: [

              {
                yAxisIndex: 1,
                name: '维修率',
                type: 'line',
                lineStyle:{
                  color:'#C9B9F3FF'
                },

                emphasis: {
                  focus: 'series'
                },
                data: res.result.map(e => e.percentage),
              },
              {
                yAxisIndex: 0,
                backgroundColor:'#072d5b',
                name: '需维修',
                type: 'bar',
                barWidth:10,
                emphasis: {
                  focus: 'series'
                },

                data: res.result.map(e => e.xuWeiXiuCount)
              },
              {
                yAxisIndex: 0,
                zlevel:2,
                name: '已维修',
                type: 'bar',
                barWidth:10,
                emphasis: {
                  focus: 'series'
                },
                data: res.result.map(e => e.yiWeiXiuCount)
              },
            ]
          }
          option && myChart.setOption(option)
        }
      })
    },
    queryBeipin() {
      getAction('/view/screen/index/beipin').then(res => {
        if (res.success) {
          var chartDom = document.getElementById('echart-beipin')
          var myChart = echarts.init(chartDom)
          var colors = ['#301CA2', '#913E3F', 'rgb(172,131,64)']
          var seriesData = res.result.map((e, index) => ({
            name: e.name,
            value: e.count,
            itemStyle: {
              color: colors[index % colors.length]
            }
          }));
          var option = {
            color: [],
            grid: {
              top: '5%',
              bottom: '12%',
              left: '20%',
              right: '10%'
            },
            xAxis: {
              type: 'value',
              splitLine: {
                show: false
              },
              axisLabel:{
                color:'#ffffff'
              },
            },
            yAxis:
              {
                data: res.result.map(e => e.name),
                axisLabel:{
                  color:'#ffffff'
                },
              },
            series: [
              {
                data: seriesData,
                type: 'bar',
                barMaxWidth: 15,
                label: {
                  show: true,
                  position: 'right',
                  textStyle: {
                    color: 'white'
                  }
                }
              }

            ]
          }
          option && myChart.setOption(option)
        }
      })
    },
    queryGuzhang() {
      this.queryParam.pageNo = this.currentPage1;
      this.queryParam.pageSize = this.pageSize;
      getAction('/repair/eneFaultRepairHandle/list',this.queryParam).then(res => {
        if (res.success) {
          this.abnormalList = res.result.records.map((item, index) => ({
            ...item,
            xh: index + 1
          }));
          this.total1=res.result.total;
        }
      })
    },
    queryBaoyang() {
      this.queryParam.pageNo = this.currentPage;
      this.queryParam.pageSize = this.pageSize;
      getAction('/gongdan/gdBaoyangGongdan/list',this.queryParam).then(res => {
        if (res.success) {
          this.maintainList = res.result.records.map((item, index) => ({
            ...item,
            xh: index + 1
          }));
          this.total=res.result.total;
        }
      })
    },
    queryGzType() {
      getAction('/view/screen/index/gztype').then(res => {
        if (res.success) {
          var chartDom = document.getElementById('echart-failuretype')
          var myChart = echarts.init(chartDom)
          var colors = ['#301CA2', '#913E3F', 'rgb(172,131,64)']
          var seriesData = res.result.map((e, index) => ({
            name: e.type,
            value: e.count,
            itemStyle: {
              color: colors[index % colors.length]
            }
          }));
          var option = {
            color: [],
            grid: {
              top: '5%',
              bottom: '12%',
              left: '12%',
              right: '10%'
            },
            xAxis: {
              type: 'value',
              axisLabel:{
                color:'#ffffff'
              },
              splitLine: {
                show: false
              }
            },
            yAxis:
              {
                type: 'category',
                axisLabel:{
                  color:'#ffffff'
                },
                data: res.result.map(e => e.type),
              },
            series: [
              {
                data: seriesData,
                type: 'bar',
                barMaxWidth: 15,
                label: {
                  show: true,
                  position: 'right',
                  textStyle: {
                    color: 'white'
                  }
                }
              }

            ]
          }
          option && myChart.setOption(option)
        }
      })
    },
    queryGzStatic(){
      getAction('/view/screen/index/guzhangStatic').then(res => {
        if(res.success){
          var chartDom = document.getElementById('echart-faultstatistics')
          var myChart = echarts.init(chartDom)
          var option = {
            color: ['#072d5b','#379e9d','#ECCB77FF','#5aefee'],
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              },
              textStyle:{
                color:'#ffffff'
              },
              formatter: function (params) {
                console.log("params---------->",params)
                var html = params[0].name + '<br>';
                html+=`${params[1].marker}故障量：${params[1].value?.toFixed(2)??'-'}<br>`+
                  `${params[0].marker}故障率：${(params[0].value?.toFixed(2)??'-')}%`
                return html;
              }
            },
            title: {
              textStyle: {
                fontWeight: 'normal'
              }
            },
            legend: {
              show:true,
              icon: 'rect',
              itemWidth: 10,
              itemHeight: 10,
              right:150,
              top:12,
              textStyle: {
                color: '#ffffff',
              },

            },
            grid: {
              top: 40,
              left: 12,
              right: 12,
              bottom: 12,
              containLabel: true
            },
            xAxis:
              {
                type: 'category',
                data: res.result.map(e => e.repairDate),
                axisLabel:{
                  color:'#ffffff'
                },
              },
            yAxis:[
              {
                name:'数量',
                type: 'value',
                splitLine:{
                  show: false
                },
                axisLabel:{
                  color:'#ffffff'
                },
                nameTextStyle: {
                  color: '#ffffff'
                }
              },
              {
                name:'故障率',
                type: 'value',
                axisLabel:{
                  color:'#ffffff',
                  formatter: '{value}%',
                },
                nameTextStyle: {
                  color: '#ffffff'
                },
                max:100,
                min:0,
                splitLine:{
                  show:false,
                },
              },
            ],
            series: [

              {
                yAxisIndex: 1,
                name: '故障率',
                type: 'line',
                lineStyle:{
                  color:'#C9B9F3FF'
                },

                emphasis: {
                  focus: 'series'
                },
                data: res.result.map(e => e.percentage),
              },
              {
                yAxisIndex: 0,
                backgroundColor:'#072d5b',
                name: '故障量',
                type: 'bar',
                barWidth:10,
                emphasis: {
                  focus: 'series'
                },
                data: res.result.map(e => e.deviceCount)
              },
            ]
          }
          option && myChart.setOption(option)
        }
      })
    },
    queryJiaozhun(){
      getAction('/view/screen/index/jiaozhun').then(res => {
        if(res.success){
          var chartDom = document.getElementById('echart-jiaozhun')
          var myChart = echarts.init(chartDom)
          var option = {
            color: ['#072d5b','#379e9d','#ECCB77FF','#5aefee'],
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              },
              textStyle:{
                color:'#FFffff'
              },
              formatter: function (params) {
                var html = params[0].name + '<br>';
                html+=`${params[1].marker}需校准：${params[1].value?.toFixed(2)??'-'}<br>`+
                  `${params[2].marker}已校准：${params[2].value?.toFixed(2)??'-'}<br>`+
                  `${params[0].marker}校准率：${(params[0].value?.toFixed(2)??'-')}%`
                return html;
              }
            },
            title: {
              textStyle: {
                fontWeight: 'normal'
              }
            },
            legend: {
              show:true,
              icon: 'rect',
              itemWidth: 10,
              itemHeight: 10,
              right:150,
              top:12,
              textStyle: {
                color: '#ffffff',
              },

            },
            grid: {
              top: 40,
              left: 12,
              right: 12,
              bottom: 12,
              containLabel: true
            },
            xAxis:
              {
                type: 'category',
                data: res.result.map(e => e.month),
                axisLabel:{
                  color:'#ffffff'
                },
              },
            yAxis:[
              {
                name:'数量',
                type: 'value',
                splitLine:{
                  show: false
                },
                axisLabel:{
                  color:'#ffffff'
                },
                nameTextStyle: {
                  color: '#ffffff'
                }
              },
              {
                name:'校准率',
                type: 'value',
                axisLabel:{
                  color:'#ffffff',
                  formatter: '{value}%',
                },
                nameTextStyle: {
                  color: '#ffffff'
                },
                max:100,
                min:0,
                splitLine:{
                  show:false,
                },
              },
            ],
            series: [

              {
                yAxisIndex: 1,
                name: '校准率',
                type: 'line',
                lineStyle:{
                  color:'#C9B9F3FF'
                },

                emphasis: {
                  focus: 'series'
                },
                data: res.result.map(e => e.percentage),
              },
              {
                yAxisIndex: 0,
                backgroundColor:'#072d5b',
                name: '需校准',
                type: 'bar',
                barWidth:10,
                emphasis: {
                  focus: 'series'
                },
                data: res.result.map(e => e.xuJiaoZhunCount)
              },
              {
                yAxisIndex: 0,
                zlevel:2,
                name: '已校准',
                type: 'bar',
                barWidth:10,
                emphasis: {
                  focus: 'series'
                },
                data: res.result.map(e => e.yiJiaoZhunCount)
              },
            ]
          }
          option && myChart.setOption(option)
        }
      })
    },
    baoyangStatic(){
      getAction('/view/screen/index/baoyangStatic').then(res => {
        if(res.success){
          var chartDom = document.getElementById('echart-baoyangstatic')
          var myChart = echarts.init(chartDom)
          var option = {
            color: ['#072d5b','#379e9d','#ECCB77FF','#5aefee'],
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              },
              textStyle:{
                color:'#FFffff'
              },
              formatter: function (params) {
                var html = params[0].name + '<br>';
                html+=`${params[1].marker}需保养：${params[1].value?.toFixed(2)??'-'}<br>`+
                  `${params[2].marker}已保养：${params[2].value?.toFixed(2)??'-'}<br>`+
                  `${params[0].marker}保养率：${(params[0].value?.toFixed(2)??'-')}%`
                return html;
              }
            },
            title: {
              textStyle: {
                fontWeight: 'normal'
              }
            },
            legend: {
              show:true,
              icon: 'rect',
              itemWidth: 10,
              itemHeight: 10,
              right:150,
              top:12,
              textStyle: {
                color: '#ffffff',
              },

            },
            grid: {
              top: 40,
              left: 12,
              right: 12,
              bottom: 12,
              containLabel: true
            },
            xAxis:
              {
                type: 'category',
                data: res.result.map(e => e.shebeiname),
                axisLabel:{
                  color:'#ffffff'
                },
              },
            yAxis:[
              {
                name:'数量',
                type: 'value',
                splitLine:{
                  show: false
                },
                axisLabel:{
                  color:'#ffffff'
                },
                nameTextStyle: {
                  color: '#ffffff'
                }
              },
              {
                name:'保养率',
                type: 'value',
                axisLabel:{
                  color:'#ffffff',
                  formatter: '{value}%',
                },
                nameTextStyle: {
                  color: '#ffffff'
                },
                max:100,
                min:0,
                splitLine:{
                  show:false,
                },
              },
            ],
            series: [

              {
                yAxisIndex: 1,
                name: '保养率',
                type: 'line',
                lineStyle:{
                  color:'#C9B9F3FF'
                },

                emphasis: {
                  focus: 'series'
                },
                data: res.result.map(e => e.percentage),
              },
              {
                yAxisIndex: 0,
                backgroundColor:'#072d5b',
                name: '需保养',
                type: 'bar',
                barWidth:10,
                emphasis: {
                  focus: 'series'
                },
                data: res.result.map(e => e.xubaoyang)
              },
              {
                yAxisIndex: 0,
                zlevel:2,
                name: '已保养',
                type: 'bar',
                barWidth:10,
                emphasis: {
                  focus: 'series'
                },
                data: res.result.map(e => e.yibaoyang)
              },
            ]
          }
          option && myChart.setOption(option)
        }
      })
    },
    calculateTimeDifference(startTime, endTime) {
      // 将时间字符串转换为Date对象
      const start = new Date(startTime);
      if(endTime == null){
        return "未完成"
      }
      const end = new Date(endTime);

      // 计算时间差（毫秒）
      const diffMs = end - start;

      // 转换为分钟
      const diffMinutes = Math.floor(diffMs / 1000 / 60);

      const days = Math.floor(diffMinutes / (60 * 24)); // 计算天数
      const hours = Math.floor((diffMinutes % (60 * 24)) / 60); // 计算剩余的小时数
      const minutes = diffMinutes % 60; // 计算剩余的分钟数

      // 根据天数、小时数和分钟数构建格式化字符串
      let formattedTime;
      if (days > 0) {
        formattedTime = `${days}d${hours < 10 ? '0' + hours : hours}h${minutes < 10 ? '0' + minutes : minutes}min`;
      } else if (hours > 0) {
        formattedTime = `${hours < 10 ? '0' + hours : hours}h${minutes < 10 ? '0' + minutes : minutes}min`;
      } else {
        formattedTime = `${minutes < 1 ? 1 : minutes}min`;
      }

      // 如果时间差为负数，则返回"未完成"
      if (diffMs < 0) {
        formattedTime = "未完成";
      }

      return formattedTime;
    }
  },
  computed: {
    paginatedMaintainList() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = this.currentPage * this.pageSize;
      return this.maintainList.slice(start, end);
    },
  },
  beforeDestroy() {
    // 在组件销毁前清除定时器，防止内存泄漏
    clearInterval(this.timer);
  }
}
</script>

<style lang="less" scoped>
.bg {
  user-select: none;
  font-family: 'SourceHanSansCN-Normal';
  background-color: #181b19;
  width: 1880px;
  height: 950px;
  background-image: url(~@assets/dashboard/bg.png);
  background-size: 1920px 1080px;
  color: #ffffff;
  position: absolute;
  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);
  transform-origin: left top;
  overflow: hidden;
}

.title {
  background-color: #0B2153;
  padding: 20px 43px 0 0;
  margin-bottom: 10px;
  width: 100%;
  height: 80px;
  color: #99E4F3;
  font-size: 40px;
  text-align: center;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title .main-text {
  flex: 1;
  text-align: center;
}

.title-time1 {
  font-size: 16px;
  color: #99E4F3;
  text-align: right;
}

.title-time2 {
  font-size: 26px;
  color: #99E4F3;
}

.yd {
  position: absolute;
  top: 116px;
  left: 590px;
  width: 700px;
  height: 390px;
  z-index: -1;
  opacity: 0.6;
}

.sbzt {
  background-color: #192F5B;
  position: absolute;
  top: 90px;
  left: 590px;
  width: 700px;
  height: 35px;
  z-index: -1;
  color: #99E4F3;
  font-size: 16px;
  text-align: center;
}

.body {
  padding: 0 20px;
  display: flex;
  flex-direction: row;

  &-middle {
    flex: 1;
  }

  .biaoti {
    background-color: #192F5B;
    color: #99E4F3;
    font-size: 16px;
    text-align: center;
  }
}

.left-box {
  height: 215px;
  width: 540px;
  background: linear-gradient(to bottom, #051f41, #051f4100);
}

.left-box-bot {
  height: 215px;
  width: 910px;
  background: linear-gradient(to bottom, #051f41, #051f4100);

  .biaoti-bot {
    color: #99E4F3;
    font-size: 16px;
    text-align: center;
  }
}

.box {
  float: right;
  height: 323px;
  width: 540px;
  background: linear-gradient(to bottom, #051f41, #051f4100);
}

.box-bot {
  float: right;
  height: 215px;
  width: 910px;
  background: linear-gradient(to bottom, #051f41, #051f4100);

  .biaoti-bot {
    color: #99E4F3;
    font-size: 16px;
    text-align: center;
  }
}

.middle-box {
  position: absolute;
  top: 520px;
  left: 590px;
  width: 700px;
  height: 220px;
  background: linear-gradient(to bottom, #051f41, #051f4100);
}

.chart-view-left {
  height: 180px;
}

.chart-view {
  height: 260px;
}

table > tr > td > div {
  width: 110px;
  overflow: hidden !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

table tr {
  height: 40px;
  line-height: 40px;
}

.tbody tr {
  position: relative;
}

.tbody tr:nth-of-type(odd) {
  background-color: rgba(13, 83, 153, 0.2);
}

.tbody tr:nth-of-type(even) {
  background-color: rgba(13, 83, 153, 0);
}

.thead tr {
  background-color: #093b70;
}

.tbody-box {
  overflow-y: auto;
  overflow-x: hidden;
  height: 215px;
}

.tbody-box ::-webkit-scrollbar {
  width: 12px; /* 设置滚动条的宽度 */
  height: 12px; /* 设置滚动条的高度 */
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.kuang {
  background-color: #093b70;
}

::v-deep .gutter-example .ant-row > div {
  background: transparent;
  border: 0;
}
.gutter-box {
  background: #00a0e9;
  padding: 5px 0;
}

</style>